<template>
    <div class="user-form">
      <div class="header">
        <span class="btn fl" @click="goBack">返回</span>
      </div>
      <form class="form">
        <div class="form-item">
          <div class="label">用户名</div>
          <input type="text" v-model="userForm.userName">
        </div>
        <div class="form-item">
          <div class="label">密码</div>
          <input type="password" v-model="userForm.password">
        </div>
        <div class="form-item">
          <div class="label"></div>
          <button @click="onsubmit">保存</button>
        </div>
      </form>
    </div>
</template>

<script>
  import { findUserInfo, saveUser } from '@/api/user'
    export default {
      name: "user-form",
      data() {
        return {
          userForm: {
            userName: '',
            password: ''
          }
        }
      },
      mounted() {
        this.init()
      },
      methods: {
        init() {
          let { id } = this.$route.query
          findUserInfo(id).then(res => {
            let { data } = res
            this.userForm = data
          })
        },
        onsubmit() {
          saveUser(this.userForm).then(res => {
            alert('保存成功')
            this.init()
          })
        },

        goBack() {
          this.$router.go(-1)
        }
      }
    }
</script>

<style scoped lang="scss">
  .user-form {
    .form {
      .form-item {
        margin-top: 10px;
        .label {
          width: 100px;
          display: inline-block;
        }
      }
    }
  }
</style>
